﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/css/yui-cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
    <script src="../assets/js/yui-source.js"></script>
	<title>PreloadJS v1.0.0 API Documentation : SamplePlugin</title>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><a href="http://createjs.site/preloadjs"><img src="../assets/docs-icon-PreloadJS.png" title="PreloadJS"></a></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Documentation for: 1.0.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="AbstractLoader.html">AbstractLoader</a></li>
            
                <li><a href="AbstractMediaLoader.html">AbstractMediaLoader</a></li>
            
                <li><a href="AbstractRequest.html">AbstractRequest</a></li>
            
                <li><a href="BinaryLoader.html">BinaryLoader</a></li>
            
                <li><a href="CSSLoader.html">CSSLoader</a></li>
            
                <li><a href="DataUtils.html">DataUtils</a></li>
            
                <li><a href="DomUtils.html">DomUtils</a></li>
            
                <li><a href="ErrorEvent.html">ErrorEvent</a></li>
            
                <li><a href="Event.html">Event</a></li>
            
                <li><a href="EventDispatcher.html">EventDispatcher</a></li>
            
                <li><a href="FontLoader.html">FontLoader</a></li>
            
                <li><a href="ImageLoader.html">ImageLoader</a></li>
            
                <li><a href="JavaScriptLoader.html">JavaScriptLoader</a></li>
            
                <li><a href="JSONLoader.html">JSONLoader</a></li>
            
                <li><a href="JSONPLoader.html">JSONPLoader</a></li>
            
                <li><a href="LoadItem.html">LoadItem</a></li>
            
                <li><a href="LoadQueue.html">LoadQueue</a></li>
            
                <li><a href="ManifestLoader.html">ManifestLoader</a></li>
            
                <li><a href="MediaTagRequest.html">MediaTagRequest</a></li>
            
                <li><a href="Methods.html">Methods</a></li>
            
                <li><a href="PreloadJS.html">PreloadJS</a></li>
            
                <li><a href="ProgressEvent.html">ProgressEvent</a></li>
            
                <li><a href="RequestUtils.html">RequestUtils</a></li>
            
                <li><a href="SamplePlugin.html">SamplePlugin</a></li>
            
                <li><a href="SoundLoader.html">SoundLoader</a></li>
            
                <li><a href="SpriteSheetLoader.html">SpriteSheetLoader</a></li>
            
                <li><a href="SVGLoader.html">SVGLoader</a></li>
            
                <li><a href="TagRequest.html">TagRequest</a></li>
            
                <li><a href="TextLoader.html">TextLoader</a></li>
            
                <li><a href="Types.html">Types</a></li>
            
                <li><a href="URLUtils.html">URLUtils</a></li>
            
                <li><a href="Utility%20Methods.html">Utility Methods</a></li>
            
                <li><a href="VideoLoader.html">VideoLoader</a></li>
            
                <li><a href="XHRRequest.html">XHRRequest</a></li>
            
                <li><a href="XMLLoader.html">XMLLoader</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="../modules/CreateJS.html">CreateJS</a></li>
            
                <li><a href="../modules/PreloadJS.html">PreloadJS</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
            <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked="">
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>SamplePlugin Class</h1>
<div class="box meta">
    

    

    
        <div class="foundat">
            Defined in: <a href="../files/preloadjs_plugins_SamplePlugin.js.html#l38"><code>SamplePlugin:38</code></a>
        </div>
    

    
        
            Module: <a href="../modules/PreloadJS.html">PreloadJS</a>
        
    

    
</div>



<div class="box intro">
    <p>A PreloadJS plugin provides a way to inject functionality into PreloadJS to load file types that are unsupported,
or in a way that PreloadJS does not.</p>
<p><strong>Note that this class is mainly for documentation purposes, and is not a real plugin.</strong></p>
<p>Plugins are registered based on file extension, or supported preload types, which are defined as constants on
the <a href="LoadQueue.html" class="crosslink">LoadQueue</a> class. Available load types are:</p>
<ul>
    <li>binary (LoadQueue/BINARY:property)</li>
    <li>css (LoadQueue/CSS:property)</li>
    <li>image (LoadQueue/IMAGE:property)</li>
    <li>javascript (LoadQueue/JAVASCRIPT:property)</li>
    <li>json (LoadQueue/JSON:property)</li>
    <li>jsonp (LoadQueue/JSONP:property)</li>
    <li>manifest (LoadQueue/MANIFEST:property)</li>
    <li>sound (LoadQueue/SOUND:property)</li>
    <li>spriteSheet (LoadQueue/SPRITESHEET:property)</li>
    <li>svg (LoadQueue/SVG:property)</li>
    <li>text (LoadQueue/TEXT:property)</li>
    <li>xml (LoadQueue/XML:property)</li>
</ul>

<p>A plugin defines what types or extensions it handles via a <a href="SamplePlugin.html#method_getPreloadHandlers" class="crosslink">getPreloadHandlers</a>
method, which is called when a plugin is first registered.</p>
<p>To register a plugin with PreloadJS, simply install it into a LoadQueue before files begin to load using the
<a href="LoadQueue.html#method_installPlugin" class="crosslink">installPlugin</a> method:</p>
<pre class="code prettyprint"><code> var queue = new createjs.LoadQueue();
 queue.installPlugin(createjs.SamplePlugin);
 queue.loadFile("test.jpg");</code></pre>
<p>The <a href="SamplePlugin.html#method_getPreloadHandlers" class="crosslink">getPreloadHandlers</a> method can also return a <code>callback</code>
property, which is a function that will be invoked before each file is loaded. Check out the <a href="SamplePlugin.html#method_preloadHandler" class="crosslink">preloadHandler</a>
for more information on how the callback works. For example, the SoundJS plugin allows PreloadJS to manage a
download that uses the Flash Player.</p>

</div>



<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

        
            <li class="api-class-tab methods"><a href="#methods">Methods</a></li>
        
        
        
        
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

            
                <div class="index-section methods">
                    <h3>Methods</h3>

                    <ul class="index-list methods">
                        
                            <li class="index-item method">
                                <a href="#method_fileLoadHandler">fileLoadHandler</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_getPreloadHandlers">getPreloadHandlers</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_preloadHandler">preloadHandler</a>

                                
                                
                            </li>
                        
                    </ul>
                </div>
            

            

            

            
        </div>

        
            <div id="methods" class="api-class-tabpanel">
                <h2 class="off-left">Methods</h2>

                
                    <div id="method_fileLoadHandler" class="method item">
    <h3 class="name"><code>fileLoadHandler</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>event</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/preloadjs_plugins_SamplePlugin.js.html#l186"><code>fileLoadHandler:186</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>This is a sample method to show a <code>completeHandler</code>, which is optionally specified by the return object in the
<a href="SamplePlugin.html#method_preloadHandler" class="crosslink">preloadHandler</a>. This sample provides a <code>completeHandler</code> to the
<a href="LoadItem.html" class="crosslink">LoadItem</a>. This method is called after the item has completely loaded, but before
the <a href="LoadQueue.html#event_fileload" class="crosslink">fileload</a> event is dispatched from the <a href="LoadQueue.html" class="crosslink">LoadQueue</a>.</p>
<p>The provided sample also listens for the <a href="AbstractLoader.html#event_complete" class="crosslink">complete</a>
event on the loader it returns to show a different usage.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">event</code>
                        <span class="type"><a href="Event.html" class="crosslink">Event</a></span>
                    

                    

                    <div class="param-description">
                        <p>A <a href="LoadQueue.html#event_fileload" class="crosslink">fileload</a> event.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_getPreloadHandlers" class="method item">
    <h3 class="name"><code>getPreloadHandlers</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/preloadjs_plugins_SamplePlugin.js.html#l83"><code>getPreloadHandlers:83</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>When a plugin is installed, this method will be called to let PreloadJS know when to invoke the plugin.</p>
<p>PreloadJS expects this method to return an object containing:</p>
<ul>
    <li><strong>callback:</strong> The function to call on the plugin class right before an item is loaded. Check
    out the <a href="SamplePlugin.html#method_preloadHandler" class="crosslink">preloadHandler</a> method for more information. The callback
    is automatically called in the scope of the plugin.</li>
    <li><strong>types:</strong> An array of recognized PreloadJS load types to handle. Supported load types are
    "binary","image", "javascript", "json", "jsonp", "sound", "svg", "text", and "xml".</li>
    <li><strong>extensions:</strong> An array of strings containing file extensions to handle, such as "jpg",
    "mp3", etc. This only fires if an applicable type handler is not found by the plugin.</li>
</ul>

<p>Note that currently, PreloadJS only supports a single handler for each extension or file type.</p>
<h4>Example</h4>

<pre class="code prettyprint"><code> // Check out the SamplePlugin source for a more complete example.
 SamplePlugin.getPreloadHandlers = function() {
     return {
         callback: SamplePlugin.preloadHandler,
         extensions: ["jpg", "jpeg", "png", "gif"]
     }
 }</code></pre>
<p>If a plugin provides both "type" and "extension" handlers, the type handler will take priority, and will only
fire once per file. For example if you have a handler for type=sound, and for extension=mp3, the callback will
fire when it matches the type.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>:
                    
                    <p>An object defining a callback, type handlers, and extension handlers (see description)</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_preloadHandler" class="method item">
    <h3 class="name"><code>preloadHandler</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>loadItem</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>queue</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    
        <span class="returns-inline">
            <span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> | <a href="AbstractLoader.html" class="crosslink">AbstractLoader</a></span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/preloadjs_plugins_SamplePlugin.js.html#l124"><code>preloadHandler:124</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>This is a sample method to show how to handle the callback specified in the LoadQueue/getPreloadHandlers.
Right before a file is loaded, if a plugin for the file type or extension is found, then the callback for that
plugin will be invoked. This gives the plugin an opportunity to modify the load item, or even cancel the load.
The return value of the callback determines how PreloadJS will handle the file:</p>
<ul>
    <li><strong>false:</strong> Skip the item. This allows plugins to determine if a file should be loaded or
    not. For example,the plugin could determine if a file type is supported at all on the current system, and
    skip those that do not.</li>
    <li><strong>true:</strong> Continue normally. The plugin will not affect the load.</li>
    <li><strong>AbstractLoader instance:</strong> Used as the loader for the content. This is new in 0.6.0.</li>
</ul>

<p>Since the <a href="LoadItem.html" class="crosslink">LoadItem</a> is passed by reference, a plugin can modify as needed, even
appending additional data to it. Note that if the <a href="LoadItem.html#property_src" class="crosslink">src</a> is
modified, PreloadJS will automatically update the LoadItem/ext:property property.</p>
<h4>Example</h4>

<pre class="code prettyprint"><code> // Cancel a load
 SamplePlugin.preloadHandler = function(loadItem, queue) {
     if (loadItem.id.indexOf("thumb") { return false; } // Don&#39;t load items like "image-thumb.png"
     return true;
 }

 // Specify a completeHandler
 SamplePlugin.preloadHandler = function(loadItem, queue) {
     item.completeHandler = SamplePlugin.fileLoadHandler;
 }

 // Check out the SamplePlugin source to see another example.</code></pre>
<p><em>Note: In 0.4.2 and earlier, instead of a <a href="LoadItem.html" class="crosslink">LoadItem</a>, arguments were passed in,
and a modified object was returned to PreloadJS. This has been changed to passing a reference to the LoadItem,
which can be directly modified.</em></p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">loadItem</code>
                        <span class="type"><a href="LoadItem.html" class="crosslink">LoadItem</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
                    

                    

                    <div class="param-description">
                        <p>The item that PreloadJS is going to load. This item is passes by reference,
so it can be directly modified.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">queue</code>
                        <span class="type"><a href="LoadQueue.html" class="crosslink">LoadQueue</a></span>
                    

                    

                    <div class="param-description">
                        <p>The <a href="LoadQueue.html" class="crosslink">LoadQueue</a> instance that is preloading the item.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> | <a href="AbstractLoader.html" class="crosslink">AbstractLoader</a></span>:
                    
                    <p>How PreloadJS should handle the load. See the main description for more info.</p>

                
            </div>
        </div>
    

    
</div>

                
            </div>
        

        

        

        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
